<template>
	<view>
		<!-- 选择栏 -->
		<view class="choose-tab flex relative" :style="[{top:0 + 'px'}]">
			<view :class="['tab-item flex-sub',checked == index ? 'active':'']" v-for="(item,index) in tabbar"
				:key="index" @click="chooseTab(index)">
				{{item.name}}
			</view>
		</view>


		<!-- 订单列表 -->
		<swiper class="grace-tab-swiper-full" :current="swiperCurrentIndex" @change="swiperChange"
			:style="{ height: tabHeight + 'px' }">
			<swiper-item v-for="(item, newsIndex) in tabbar.length" :key="newsIndex">
				<scroll-view :data-scindex="newsIndex" @scrolltolower="scrollBottom" scroll-y="true"
					:style="{ height: tabHeight + 'px' }">
					
					<view style="width:750rpx;height:116rpx;"></view>

					<view class="dataList flex align-center flex-direction" v-for="(item,index) in 3" :key="index">
						
						<view class="coupon bg-gradual-orange flex">
							<view class="item1 relative">
								<view class="text1">
									￥66.00
								</view>
								<view class="text2">
									满减券
								</view>
								
								<view class="around1"></view>
								<view class="around2"></view>
							</view>
							<view class="item2">
								
								<view class="text1">
									这个是优惠券名称
								</view>
								<view class="text2 flex justify-start align-center">
									<image class="w30 h30 mr-8" src="/static/store/jiantou.png"></image>
									<text>
										满50元可用
									</text>
								</view>
								<view class="text3 flex justify-start align-center">
									<image class="w30 h30 mr-8" src="/static/store/jiantou.png"></image>
									<text>
										2020-2021
									</text>
								</view>
								
							</view>
							
						</view>
						
						
					</view>
						


				</scroll-view>
			</swiper-item>
		</swiper>
		
		
		<!--添加新的优惠券 -->
		<view class="cu-bar tabbar  shadow foot">
			<view class="btn-live">
				添加优惠券
			</view>
		</view>



	</view>

</template>

<script>
	export default {
		data() {
			return {
				TabCur: undefined,
				swiperCurrentIndex: undefined,
				tabHeight: 466,
				
				orderClassification:false,//订单分类按钮


				checked: 0, //选中下标
				tabbar: [{
						id: 1,
						name: '未使用'
					},
					{
						id: 2,
						name: '已使用'
					},
					{
						id: 3,
						name: '已过期'
					}
				]


			}
		},
		computed: {
			style() {
				var StatusBar = this.StatusBar;
				var CustomBar = this.CustomBar;
				var style = `height:${CustomBar}px;padding-top:${StatusBar}px;`;
				return style
			}
		},
		onLoad() {

		},
		onReady() {
			var that = this;
			//获取屏幕高度及比例
			var winInfo = uni.getSystemInfo({
				success: function(res) {
					var windowHeight = res.windowHeight;
					console.log(windowHeight, '--手机高度')
					var dom = uni.createSelectorQuery().select('.choose-tab')
					dom.fields({
						size: true
					}, res => {
						if (!res) {
							return;
						}
						that.tabHeight = windowHeight;
					}).exec();
				}
			});
		},
		onShow() {



		},
		methods: {
			// 订单分类按钮
			checkClass(){
				console.log('订单分类点击')
				this.orderClassification = !this.orderClassification
			},
			// srcoll到底了
			scrollBottom() {
				console.log('已经到底了=====')
			},
			// 轮播图滑动
			swiperChange(e) {
				var index = e.detail.current;
				this.checked = index;
				this.swiperCurrentIndex = index;
			},
			chooseTab(index) {
				this.checked = index;
				this.swiperCurrentIndex = index;
				console.log(this.checked, '===checked')
			},
			jump() {
				this.$mRouter.push({
					route: this.$mRoutesConfig.test.orderDetail,
					query: {
						a: 0
					}
				})
			},
			// 返回上一页
			BackPage() {
				console.log('是否可以点击')
				uni.navigateBack({
					delta: 1
				});
			}


		}
	}
</script>

<style lang="scss">
	.btn-live{
		width:686rpx;
		height:86rpx;
		background: #d4237a;
		color:white;
		font-size: 36rpx;
		text-align: center;
		line-height: 86rpx;
		border-radius: 66rpx;
		margin-left: 32rpx;
	}
	// 优惠券
	.dataList{
		width:750rpx;
		padding:0 32rpx;
		.coupon{
			width: 686rpx;
			height:220rpx;
			border-radius: 16rpx;
			margin-bottom: 24rpx;;
			.item1{
				flex:3;
				border-right:4rpx solid white;
				view{
					width:100%;
					height:110rpx;
					text-align: center;
					color:white;
				}
				.text1{
					font-size: 36rpx;
					font-weight: bold;
					line-height: 130rpx;
				}
				.text2{
					font-size: 42rpx;
					line-height: 90rpx;
				}
				
				.around1{
					width:28rpx;
					height:28rpx;
					position: absolute;
					right:-16rpx;
					top:-12rpx;
					background-color: white;
					border-radius: 50%;
				}
				.around2{
					width:28rpx;
					height:28rpx;
					position: absolute;
					right:-16rpx;
					bottom:-12rpx;
					background-color: white;
					border-radius: 50%;
				}
			}
			.item2{
				flex:5;
				padding:20rpx 32rpx;
				.text1{
					font-size: 36rpx;
					font-weight: bold;
					line-height: 80rpx;
				}
				.text2{
					line-height: 50rpx;
					font-size: 28rpx;
				}
				.text3{
					line-height: 50rpx;
					font-size: 28rpx;
				}
			}
		}
		
	}
	
	
	
	.class-type{
		width:100%;
		padding-left: 30%;
	}
	.order {
		width: 750rpx;
		padding-top: 116rpx;
		
		// 订单列表
		.order-item{
			width: 686rpx;
			height: 264rpx;
			background: #FFFFFF;
			box-shadow: 0rpx 4rpx 12rpx rgba(0, 0, 0, 0.1);
			border-radius: 16rpx;
			margin-top: 25rpx;
			
			.item-top{
				width:100%;
				height:180rpx;
				padding: 24rpx;
				.top-img{
					width: 132rpx;
					height: 132rpx;
					border-radius: 8rpx;
				}
				.top-text{
					padding-left: 20rpx;
					flex:1;
					.text1{
						width:100%;
						.one{
							font-size: 32rpx;
							font-family: PingFang SC;
							font-weight: bold;
							line-height: 45rpx;
							color: #333333;
						}
						.two{
							font-size: 32rpx;
							font-family: PingFang SC;
							font-weight: bold;
							line-height: 45rpx;
							color: #333333;
						}
					}
					.text2{
						width:100%;
						.one{
							font-size: 24rpx;
							font-family: PingFang SC;
							font-weight: 400;
							line-height: 33rpx;
							color: #999999;
						}
						.two{
							font-size: 24rpx;
							font-family: PingFang SC;
							font-weight: 400;
							line-height: 33rpx;
							color: #999999;
						}
						
					}
				}
			}
			
			.item-bottom{
				width:100%;
				height:84rpx;
				.btn1{
					flex:1;
					font-size: 28rpx;
					font-family: PingFang SC;
					font-weight: bold;
					line-height: 40rpx;
					color: #999999;
					line-height: 84rpx;
					padding-left: 24rpx;
				}
				.btn2{
					flex:3;
					font-size: 24rpx;
					font-family: PingFang SC;
					font-weight: 500;
					line-height: 33rpx;
					color: #DC2D20;
					line-height: 84rpx;
				}
				.btn3{
					flex:2;
					
					.btn-status{
						display: inline-block;
						width: 170rpx;
						height: 58rpx;
						text-align: center;
						background: #DC2D20;
						border-radius: 8rpx;
						font-size: 28rpx;
						font-family: PingFang SC;
						font-weight: bold;
						line-height: 58rpx;
						color: #FFFFFF;
					}
					
					
				}
			}
			
			
		}

	}

	.choose-tab {
		width: 750rpx;
		height: 116rpx;
		background-color: white;
		z-index: 9999;
		line-height: 116rpx;
		text-align: center;
		color: #999999;
		position: fixed;
		left: 0;

		.top-img {
			position: absolute;
			top: 0;
			left: 0;
		}

		.tab-item {
			position: relative;
			font-size: 28rpx;
			font-family: PingFang SC;
			font-weight: bold;
			line-height: 116rpx;
			color: #999999;
		}

		.active {
			font-size: 28rpx;
			font-family: PingFang SC;
			font-weight: bold;
			line-height: 116rpx;
			color: #DC2D20;
		}
	}
</style>
